<template>
  <div class="app-container" v-loading="pageLoading">
    <el-button type="primary" class="fr" @click="createItem" v-permission="'material.add'">创建</el-button>
    <div class="filter-container">
      <el-input style="width: 260px;" placeholder="输入备件/编码按回车" clearable class="filter-item"
        @keyup.enter.native="research" @clear="research" v-model="query.query">
      </el-input>
      <el-button class="filter-item" type="success" plain @click="research">查询</el-button>
      <el-button class="filter-item" type="info" plain @click="exportData" :loading="exportLoading">导出 </el-button>
    </div>
    <z-table :list="list" :tableProps="tableProps" :columns="columns" @editItem="editItem" @deleteItem="deleteItem">
      <template v-slot:content="v">
        <span v-if="v.key == 'level'">
          {{getMatchingData(v.row[v.key],v.key)}}
        </span>

        <span v-else>{{ v.row[v.key] }}</span>
      </template>
    </z-table>
    <z-pagination :pagination="pagination" :total="total" :page.sync="query.page" :limit.sync="query.size"
      @change="getList"></z-pagination>
    <z-form-dialog :name="name" :data="data" :formProps="formProps" :fields="fields" @submit="submits"
      :submitLoading="submitLoading" :visible.sync="editFormVisible"></z-form-dialog>

  </div>
</template>

<script>
import commonMixin from '@/views/_common/mixin'
export default {
  name: 'faultType',
  mixins: [commonMixin],
  components: {},
  props: {},
  data() {
    return {
      query: {
        page: 1,
        size: 10,
      },
      name: '故障类型',
      postForList: true,
      api: this.$api.TpmFaultType,
      baseUrl: this.$api.baseUrl,
      tableProps: {
        border: true,
        opsColWith: 160,
        fixed: false,
        hideOperations: false,
      },
      columns: [
        { title: '故障编码', key: 'code', width: 200 },
        { title: '故障名称', key: 'name', width: 200 },
        { title: '故障等级', key: 'level', width: 200 },
        { title: '建议维修内容', key: 'content' },
        { title: '修改人', key: 'modify_user', width: 100 },
        { title: '最后修改时间', key: 'modify_time', width: 200 },
      ],

      fields: [
        { title: '故障编码', key: 'code', span: 12 },
        { title: '故障名称', key: 'name', span: 12 },
        {
          title: '故障等级',
          key: 'level',
          name: 'select',
          options: [],
        },
        { title: '建议维修内容', key: 'content', name: 'textarea' },
      ],
      faultTypeOptions: [],
    }
  },
  computed: {},
  watch: {},
  created() {
    this.research()
    this.getpositions()
  },
  mounted() {},
  methods: {
    getpositions() {
      this.$request(this.$api.dictionary + 'getdirectchildren', {
        parentType: 'faultType',
      }).then((r) => {
        this.faultTypeOptions = r.map((i) => ({
          label: i.label,
          value: i.value,
        }))
        this.getFieldConfig('level').options = this.faultTypeOptions
      })
    },
    // 保存和编辑
    submits() {
      this.submitLoading = true
      this.$request(this.api + 'add', this.data, 'post')
        .then((r) => {
          this.$message.success('操作成功')
          this.editFormVisible = false
          this.getList()
        })
        .finally(() => {
          this.submitLoading = false
        })
    },

    getMatchingData(val, code) {
      if (code == 'level') {
        let tmp = this.faultTypeOptions.find((i) => i.value == val)
        return tmp ? tmp.label : ''
      }
    },
  },
}
</script>

<style lang="less" scoped></style>